<template>
  <div class="comment-management">
    <!-- 快速操作面板 -->
    <QuickActionsPanel
      @quick-action="handleQuickAction"
      @refresh="handleRefresh"
    />

    <!-- 搜索和过滤 -->
    <el-card class="search-card">
      <el-form :model="searchForm" :inline="true" class="search-form">
        <el-form-item label="关键词">
          <el-input
            v-model="searchForm.keyword"
            placeholder="搜索评论内容、用户名"
            clearable
            style="width: 200px"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.status"
            placeholder="选择状态"
            clearable
            style="width: 120px"
          >
            <el-option label="正常显示" :value="1" />
            <el-option label="已删除" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="敏感内容">
          <el-select
            v-model="searchForm.isSensitive"
            placeholder="选择类型"
            clearable
            style="width: 120px"
          >
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="敏感词类型">
          <el-select
            v-model="searchForm.sensitiveType"
            placeholder="选择敏感词类型"
            clearable
            style="width: 140px"
          >
            <el-option label="脏话" value="profanity" />
            <el-option label="政治敏感" value="politics" />
            <el-option label="广告" value="advertisement" />
            <el-option label="暴力内容" value="violence" />
            <el-option label="违法内容" value="illegal" />
            <el-option label="垃圾信息" value="spam" />
          </el-select>
        </el-form-item>
        <el-form-item label="文章ID">
          <el-input
            v-model="searchForm.articleId"
            placeholder="文章ID"
            clearable
            style="width: 100px"
          />
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input
            v-model="searchForm.userId"
            placeholder="用户ID"
            clearable
            style="width: 100px"
          />
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 350px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作栏 -->
    <el-card class="operation-card">
      <div class="operation-bar">
        <div class="left-operations">
          <el-button
            type="warning"
            :disabled="!hasSelection"
            @click="handleBatchOperation('mark_sensitive')"
          >
            <el-icon><Warning /></el-icon>
            标记敏感
          </el-button>
          <el-button
            type="success"
            :disabled="!hasSelection"
            @click="handleBatchOperation('unmark_sensitive')"
          >
            <el-icon><Select /></el-icon>
            取消敏感标记
          </el-button>
          <el-button
            type="danger"
            :disabled="!hasSelection"
            @click="handleBatchOperation('delete')"
          >
            <el-icon><Delete /></el-icon>
            批量删除
          </el-button>
        </div>
        <div class="right-operations">
          <el-button type="primary" @click="showSensitiveChecker = true">
            <el-icon><Search /></el-icon>
            敏感词检测
          </el-button>
          <el-button type="info" @click="showAdvancedSearch = true">
            <el-icon><Search /></el-icon>
            高级搜索
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 评论列表 -->
    <el-card class="table-card">
      <template #header>
        <div class="table-header">
          <span>评论列表 ({{ pagination.total }}条)</span>
        </div>
      </template>
      <el-table
        v-loading="loading"
        :data="commentList"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" />

        <!-- 空数据提示 -->
        <template #empty>
          <el-empty description="暂无评论数据" />
        </template>
        <el-table-column label="评论内容" min-width="200">
          <template #default="{ row }">
            <div class="comment-content">
              <p class="content-text">{{ truncateContent(row.content) }}</p>
              <div class="content-meta">
                <el-tag
                  v-if="CommentManagementUtils.toBool(row.isSensitive)"
                  size="small"
                  :style="{
                    backgroundColor:
                      CommentManagementUtils.getSensitiveTypeColor(
                        row.sensitiveType
                      ),
                    color: '#ffffff',
                    border: 'none'
                  }"
                >
                  {{
                    CommentManagementUtils.getSensitiveTypeText(
                      row.sensitiveType
                    )
                  }}
                </el-tag>
                <span class="article-info"
                  >文章: {{ row.articleTitle || row.articleId }}</span
                >
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="用户信息" width="150">
          <template #default="{ row }">
            <div class="user-info">
              <el-avatar
                :src="formatAvatarUrl(row.userAvatar)"
                :size="32"
                fit="cover"
              >
                <template #default>
                  <IconifyIconOnline icon="ep:user" />
                </template>
              </el-avatar>
              <div class="user-details">
                <div class="user-name">
                  {{ row.userNickName || row.userName }}
                </div>
                <div class="user-id">ID: {{ row.userId }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="层级" width="80">
          <template #default="{ row }">
            <el-tag type="info" size="small">L{{ row.level }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="IP地址" width="120">
          <template #default="{ row }">
            <span class="ip-address">{{ row.ipAddress }}</span>
          </template>
        </el-table-column>
        <el-table-column label="互动数据" width="120">
          <template #default="{ row }">
            <div class="interaction-data">
              <span class="like-count">👍 {{ row.likeCount }}</span>
              <span class="reply-count">💬 {{ row.replyCount }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="时间" width="160">
          <template #default="{ row }">
            <div class="time-info">
              <div class="create-time">{{ formatTime(row.createTime) }}</div>
              <div v-if="row.auditTime" class="audit-time">
                审核: {{ formatTime(row.auditTime) }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button
                type="primary"
                size="small"
                @click="handleViewDetail(row)"
              >
                详情
              </el-button>
              <el-dropdown
                @command="command => handleDropdownCommand(command, row)"
              >
                <el-button size="small">
                  更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="original"
                      >查看原始评论</el-dropdown-item
                    >
                    <el-dropdown-item command="tree"
                      >查看回复树</el-dropdown-item
                    >
                    <el-dropdown-item
                      command="sensitive"
                      :disabled="CommentManagementUtils.toBool(row.isSensitive)"
                    >
                      标记敏感
                    </el-dropdown-item>
                    <el-dropdown-item
                      command="unsensitive"
                      :disabled="
                        !CommentManagementUtils.toBool(row.isSensitive)
                      "
                    >
                      取消敏感
                    </el-dropdown-item>
                    <el-dropdown-item command="ban">禁言用户</el-dropdown-item>
                    <el-dropdown-item command="delete" divided
                      >删除</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :total="pagination.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 敏感词检测对话框 -->
    <SensitiveChecker
      v-model:visible="showSensitiveChecker"
      @check-result="handleSensitiveCheckResult"
    />

    <!-- 高级搜索对话框 -->
    <AdvancedSearchDialog
      v-model:visible="showAdvancedSearch"
      @search="handleAdvancedSearch"
    />

    <!-- 最新评论对话框 -->
    <LatestCommentsDialog
      v-model:visible="showLatestComments"
      @view-detail="handleViewDetailFromDialog"
    />

    <!-- 热门评论对话框 -->
    <PopularCommentsDialog
      v-model:visible="showPopularComments"
      @view-detail="handleViewDetailFromDialog"
    />

    <!-- 评论详情对话框 -->
    <CommentDetail
      v-model:visible="showCommentDetail"
      :comment="currentComment"
      @refresh="handleRefresh"
      @ban-user="handleBanUserFromDetail"
    />

    <!-- 评论树对话框 -->
    <CommentTree
      v-model:visible="showCommentTree"
      :root-comment="currentComment"
      @refresh="handleRefresh"
    />

    <!-- 用户禁言对话框 -->
    <UserBanDialog
      v-model:visible="showUserBanDialog"
      :user-id="currentUserId"
      :comment="currentComment"
      @success="handleBanSuccess"
    />

    <!-- 批量操作确认对话框 -->
    <BatchOperationDialog
      v-model:visible="showBatchDialog"
      :operation-type="batchOperationType"
      :selected-comments="selectedComments"
      @confirm="handleBatchConfirm"
    />

    <!-- 原始评论对话框 -->
    <OriginalCommentDialog
      v-model:visible="showOriginalComment"
      :comment="originalCommentData"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Warning,
  Select,
  Search,
  Refresh,
  Delete,
  ArrowDown
} from "@element-plus/icons-vue";
import { IconifyIconOnline } from "@/components/ReIcon";
import {
  getCommentListApi,
  getCommentStatisticsApi,
  getCommentDetailApi,
  batchOperateCommentsApi,
  markSensitiveCommentApi,
  unmarkSensitiveCommentApi,
  type CommentInfo,
  type CommentListQuery,
  type CommentStatistics,
  CommentManagementUtils
} from "@/api/comment-management";
import SensitiveChecker from "./components/SensitiveChecker.vue";
import AdvancedSearchDialog from "./components/AdvancedSearchDialog.vue";
import LatestCommentsDialog from "./components/LatestCommentsDialog.vue";
import PopularCommentsDialog from "./components/PopularCommentsDialog.vue";
import QuickActionsPanel from "./components/QuickActionsPanel.vue";
import CommentDetail from "./components/CommentDetail.vue";
import CommentTree from "./components/CommentTree.vue";
import UserBanDialog from "./components/UserBanDialog.vue";
import BatchOperationDialog from "./components/BatchOperationDialog.vue";
import OriginalCommentDialog from "./components/OriginalCommentDialog.vue";

// 响应式数据
const loading = ref(false);
const commentList = ref<CommentInfo[]>([]);
const selectedComments = ref<CommentInfo[]>([]);
const currentComment = ref<CommentInfo | null>(null);
const currentUserId = ref<number>(0);
const dateRange = ref<[string, string] | null>(null);

// 统计数据
const statistics = ref<CommentStatistics>({
  totalComments: 0,
  deletedComments: 0,
  visibleComments: 0,
  sensitiveComments: 0,
  totalReplies: 0,
  totalLikes: 0,
  totalReplyCount: 0,
  todayComments: 0,
  yesterdayComments: 0
});

// 搜索表单
const searchForm = reactive<CommentListQuery>({
  current: 1,
  size: 20,
  keyword: "",
  status: undefined,
  isSensitive: undefined,
  sensitiveType: undefined,
  articleId: undefined,
  userId: undefined,
  startTime: "",
  endTime: ""
});

// 分页数据
const pagination = reactive({
  current: 1,
  size: 20,
  total: 0
});

// 对话框显示状态
const showSensitiveChecker = ref(false);
const showAdvancedSearch = ref(false);
const showLatestComments = ref(false);
const showPopularComments = ref(false);
const showCommentDetail = ref(false);
const showCommentTree = ref(false);
const showUserBanDialog = ref(false);
const showBatchDialog = ref(false);
const showOriginalComment = ref(false);
const batchOperationType = ref<string>("delete");

// 原始评论数据
const originalCommentData = ref<CommentInfo | null>(null);

// 计算属性
const hasSelection = computed(() => selectedComments.value.length > 0);

// 监听时间范围变化
watch(dateRange, newVal => {
  if (newVal) {
    searchForm.startTime = newVal[0];
    searchForm.endTime = newVal[1];
  } else {
    searchForm.startTime = "";
    searchForm.endTime = "";
  }
});

// 生命周期
onMounted(() => {
  loadStatistics();
  loadCommentList();
});

// 方法
const loadStatistics = async () => {
  try {
    const data = await getCommentStatisticsApi();

    if (data.code === 200 && data.data) {
      statistics.value = {
        totalComments: data.data.totalComments || 0,
        deletedComments: data.data.deletedComments || 0,
        visibleComments: data.data.visibleComments || 0,
        sensitiveComments: data.data.sensitiveComments || 0,
        totalReplies: data.data.totalReplies || 0,
        totalLikes: data.data.totalLikes || 0,
        totalReplyCount: data.data.totalReplyCount || 0,
        todayComments: data.data.todayComments || 0,
        yesterdayComments: data.data.yesterdayComments || 0
      };
    } else {
      console.error("统计数据格式异常:", data);
    }
  } catch (error) {
    console.error("加载统计数据失败:", error);
  }
};

const loadCommentList = async () => {
  loading.value = true;
  try {
    const params = {
      ...searchForm,
      current: pagination.current,
      size: pagination.size
    };

    const data = await getCommentListApi(params);

    if (data.code === 200 && data.data) {
      commentList.value = data.data.records || [];
      pagination.total = data.data.total || 0;
      pagination.current = data.data.current || 1;
      pagination.size = data.data.size || 20;
    } else {
      console.error("评论列表数据格式异常:", data);
      ElMessage.error(data.message || "数据格式异常");
      commentList.value = [];
    }
  } catch (error) {
    console.error("加载评论列表失败:", error);
    ElMessage.error("加载评论列表失败");
    commentList.value = [];
  } finally {
    loading.value = false;
  }
};

const handleSearch = () => {
  pagination.current = 1;
  loadCommentList();
};

const handleReset = () => {
  Object.assign(searchForm, {
    current: 1,
    size: 20,
    keyword: "",
    status: undefined,
    isSensitive: undefined,
    sensitiveType: undefined,
    articleId: undefined,
    userId: undefined,
    startTime: "",
    endTime: ""
  });
  dateRange.value = null;
  pagination.current = 1;
  loadCommentList();
};

const handleRefresh = () => {
  loadStatistics();
  loadCommentList();
};

const handleSelectionChange = (selection: CommentInfo[]) => {
  selectedComments.value = selection;
};

const handleSizeChange = (size: number) => {
  pagination.size = size;
  pagination.current = 1;
  loadCommentList();
};

const handleCurrentChange = (current: number) => {
  pagination.current = current;
  loadCommentList();
};

const handleViewDetail = (comment: CommentInfo) => {
  currentComment.value = comment;
  showCommentDetail.value = true;
};

const handleViewOriginalComment = async (comment: CommentInfo) => {
  try {
    const data = await getCommentDetailApi(comment.id);

    if (data && data.code === 200) {
      originalCommentData.value = data.data;
      showOriginalComment.value = true;
    } else {
      ElMessage.error(data?.message || "获取原始评论失败");
    }
  } catch (error) {
    console.error("获取原始评论失败:", error);
    ElMessage.error("获取原始评论失败");
  }
};

const handleDropdownCommand = async (command: string, comment: CommentInfo) => {
  currentComment.value = comment;

  switch (command) {
    case "original":
      await handleViewOriginalComment(comment);
      break;
    case "tree":
      showCommentTree.value = true;
      break;
    case "sensitive":
      await handleMarkSensitive(comment);
      break;
    case "unsensitive":
      await handleUnmarkSensitive(comment);
      break;
    case "ban":
      currentUserId.value = comment.userId;
      showUserBanDialog.value = true;
      break;
    case "delete":
      await handleDeleteComment(comment);
      break;
  }
};

const handleMarkSensitive = async (comment: CommentInfo) => {
  try {
    const { value: sensitiveType } = await ElMessageBox.prompt(
      "请选择敏感词类型：",
      "标记敏感内容",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputType: "select",
        inputOptions: {
          profanity: "脏话",
          politics: "政治敏感",
          advertisement: "广告",
          violence: "暴力内容",
          illegal: "违法内容",
          spam: "垃圾信息"
        },
        inputValue: "profanity",
        inputValidator: value => {
          if (!value) {
            return "请选择敏感词类型";
          }
          return true;
        }
      }
    );

    const data = await markSensitiveCommentApi(comment.id, sensitiveType);

    if (data && data.code === 200) {
      ElMessage.success("标记敏感成功");
      handleRefresh();
    } else {
      ElMessage.error(data?.message || "标记敏感失败");
    }
  } catch (error) {
    if (error !== "cancel") {
      console.error("标记敏感失败:", error);
      ElMessage.error("标记敏感失败");
    }
  }
};

const handleUnmarkSensitive = async (comment: CommentInfo) => {
  try {
    await ElMessageBox.confirm("确定要取消这条评论的敏感标记吗？", "确认操作", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    });

    const data = await unmarkSensitiveCommentApi(comment.id);

    if (data && data.code === 200) {
      ElMessage.success("取消敏感标记成功");
      handleRefresh();
    } else {
      ElMessage.error(data?.message || "取消敏感标记失败");
    }
  } catch (error) {
    if (error !== "cancel") {
      console.error("取消敏感标记失败:", error);
      ElMessage.error("取消敏感标记失败");
    }
  }
};

const handleDeleteComment = async (comment: CommentInfo) => {
  try {
    await ElMessageBox.confirm(
      "确定要删除这条评论吗？删除后可以恢复。",
      "确认删除",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );

    const data = await batchOperateCommentsApi({
      commentIds: [comment.id],
      operation: "delete",
      reason: "管理员删除"
    });

    if (data && data.code === 200) {
      ElMessage.success("删除评论成功");
      handleRefresh();
    } else {
      ElMessage.error(data?.message || "删除评论失败");
    }
  } catch (error) {
    if (error !== "cancel") {
      console.error("删除评论失败:", error);
      ElMessage.error("删除评论失败");
    }
  }
};

const handleBatchOperation = (operationType: string) => {
  batchOperationType.value = operationType;
  showBatchDialog.value = true;
};

const handleBatchConfirm = async (params: any) => {
  try {
    const data = await batchOperateCommentsApi({
      commentIds: selectedComments.value.map(c => c.id),
      operation: batchOperationType.value,
      ...params
    });

    if (data && data.code === 200) {
      ElMessage.success("批量操作成功");
      selectedComments.value = [];
      handleRefresh();
    } else {
      ElMessage.error(data?.message || "批量操作失败");
    }
  } catch (error) {
    console.error("批量操作失败:", error);
    ElMessage.error("批量操作失败");
  }
};

const handleSensitiveCheckResult = (result: any) => {
  console.log("敏感词检测结果:", result);
  // 可以根据检测结果进行相应处理
};

const handleBanUserFromDetail = (userId: number, comment: CommentInfo) => {
  currentComment.value = comment;
  currentUserId.value = userId;
  showUserBanDialog.value = true;
};

const handleBanSuccess = () => {
  ElMessage.success("用户禁言成功");
  showUserBanDialog.value = false;
  handleRefresh();
};

const handleQuickAction = (action: string, params?: CommentListQuery) => {
  console.log("快速操作:", action, "参数:", params);

  if (params) {
    // 先重置搜索表单到初始状态
    Object.assign(searchForm, {
      current: 1,
      size: 20,
      keyword: "",
      status: undefined,
      isSensitive: undefined,
      sensitiveType: undefined,
      articleId: undefined,
      userId: undefined,
      startTime: "",
      endTime: ""
    });

    // 然后应用快速操作的参数
    Object.assign(searchForm, params);
    pagination.current = 1;

    console.log("应用参数后的搜索表单:", { ...searchForm });
    loadCommentList();
  } else {
    // 处理其他快速操作
    switch (action) {
      case "latest":
        showLatestComments.value = true;
        break;
      case "popular":
        showPopularComments.value = true;
        break;
      case "refresh":
        handleRefresh();
        break;
      default:
        console.log("未知的快速操作:", action);
    }
  }
};

const handleAdvancedSearch = (params: CommentListQuery) => {
  // 应用高级搜索参数
  Object.assign(searchForm, params);
  pagination.current = 1;
  loadCommentList();
};

const handleViewDetailFromDialog = (comment: CommentInfo) => {
  // 关闭其他对话框
  showLatestComments.value = false;
  showPopularComments.value = false;
  // 显示评论详情
  currentComment.value = comment;
  showCommentDetail.value = true;
};

// 工具方法
const truncateContent = (content: string) => {
  return CommentManagementUtils.truncateContent(content, 80);
};

const getStatusText = (status: number) => {
  return CommentManagementUtils.getStatusText(status);
};

const getStatusTagType = (status: number) => {
  return CommentManagementUtils.getStatusTagType(status);
};

const formatTime = (time: string) => {
  return CommentManagementUtils.formatTime(time);
};

// 格式化头像URL
const formatAvatarUrl = (url: string): string => {
  if (!url) return "";

  // 如果已经是完整URL，直接返回
  if (url.startsWith("http://") || url.startsWith("https://")) {
    return url;
  }

  // 如果是相对路径，添加基础URL
  const baseURL = import.meta.env.DEV
    ? "http://localhost:8081"
    : "http://localhost:8081";
  return baseURL + url;
};
</script>

<style scoped lang="scss">
.comment-management {
  padding: 20px;

  .statistics-cards {
    margin-bottom: 20px;

    .stat-card {
      position: relative;
      overflow: hidden;

      :deep(.el-card__body) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
      }

      .stat-content {
        .stat-number {
          margin-bottom: 8px;
          font-size: 28px;
          font-weight: bold;
          color: #303133;

          &.pending {
            color: #e6a23c;
          }

          &.sensitive {
            color: #f56c6c;
          }

          &.approved {
            color: #67c23a;
          }
        }

        .stat-label {
          font-size: 14px;
          color: #909399;
        }
      }

      .stat-icon {
        font-size: 40px;
        color: #dcdfe6;

        &.pending {
          color: #e6a23c;
        }

        &.sensitive {
          color: #f56c6c;
        }

        &.approved {
          color: #67c23a;
        }
      }
    }
  }

  .search-card {
    margin-bottom: 20px;

    .search-form {
      :deep(.el-form-item) {
        margin-bottom: 10px;
      }
    }
  }

  .operation-card {
    margin-bottom: 20px;

    .operation-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left-operations,
      .right-operations {
        display: flex;
        gap: 8px;
      }
    }
  }

  .table-card {
    .comment-content {
      .content-text {
        margin: 0 0 8px;
        line-height: 1.4;
        word-break: break-word;
      }

      .content-meta {
        display: flex;
        gap: 8px;
        align-items: center;
        font-size: 12px;
        color: #909399;

        .article-info {
          padding: 2px 6px;
          background: #f5f7fa;
          border-radius: 4px;
        }
      }
    }

    .user-info {
      display: flex;
      gap: 8px;
      align-items: center;

      .user-details {
        .user-name {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
        }

        .user-id {
          font-size: 12px;
          color: #909399;
        }
      }
    }

    .ip-address {
      font-family: monospace;
      font-size: 12px;
      color: #606266;
    }

    .interaction-data {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 12px;

      .like-count,
      .reply-count {
        display: flex;
        gap: 4px;
        align-items: center;
      }
    }

    .time-info {
      font-size: 12px;

      .create-time {
        margin-bottom: 4px;
        color: #303133;
      }

      .audit-time {
        color: #909399;
      }
    }

    .action-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    .pagination-container {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }

  .table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
